<template>
	<view class="app-container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<u-navbar slot="top" title="常见问题" :autoBack="true" leftIconColor="#fff" placeholder bgColor="#cf141a"
				:titleStyle="{color: '#fff'}">
			</u-navbar>
			<view slot="top" class="search-item flex flex-align-center flex-justify-center">
				<u-search placeholder="请输入您的问题" v-model="keyword" animation :clearabled="true" bgColor="#fff"
					:actionStyle="{ color: '#fff' }" height="70rpx" @custom="keywordCustom"
					@clear="keywordClear"></u-search>
			</view>
			<u-collapse @change="change" @close="close" @open="open">
				<u-collapse-item :title="item.title" :name="item.id" v-for="(item,index) in dataList" :key="index">
					<text class="u-collapse-content">{{item.content}}</text>
				</u-collapse-item>
			</u-collapse>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				dataList: []
			}
		},
		onLoad() {

		},
		methods: {
			open(e) {
				console.log('open', e)
			},
			close(e) {
				console.log('close', e)
			},
			change(e) {
				console.log('change', e)
			},
			keywordClear(event) {
				this.$refs.paging.reload(false);
			},
			keywordCustom(event) {
				this.$refs.paging.reload(false);
			},
			queryList(pageNo) {
				this.$api
					.apiUserIssue({
						page: pageNo,
						keyword: this.keyword
					})
					.then((res) => {
						this.$refs.paging.complete(res.info_son);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		.search-item {
			height: 194rpx;
			background: #cf141a;
			padding: 0 80rpx;
		}
	}
</style>